<template>
  <div class="flex flex-row items-center">
    <a-radio-group v-model:value="actCondition" name="carrierGroup">
      <a-radio :value="ActivityCondition.all">不限</a-radio>
      <a-radio :value="ActivityCondition.orderPrice">订单金额</a-radio>
    </a-radio-group>
    <a-select
      v-model:value="conditionType"
      :disabled="actCondition === ActivityCondition.all"
      :options="typeData"
      class="!w-36 !mr-2"
    >
    </a-select>
    <a-input-number v-model:value="conditionValue" :disabled="actCondition === ActivityCondition.all" />
  </div>
</template>
<script setup lang="ts">
import { nextTick, ref, watch } from "vue";
import { AcitivityDefItem, ActivityCondition, ActivityConditionType } from "/@/api/main/marketing/models";
import { enumToOptions } from "/@/utils/common";

const props = defineProps<{
  value: AcitivityDefItem["_activityCondition"];
}>();
const emits = defineEmits(["change"]);

const actCondition = ref<ActivityCondition>(ActivityCondition.all);

const typeData = enumToOptions(ActivityConditionType, "activityConditionType");
const conditionType = ref<ActivityConditionType>(ActivityConditionType.gte);
const conditionValue = ref<number | null | string>(null);

watch(
  () => props.value,
  (val) => {
    if (val) {
      actCondition.value = val.activityCondition;
      conditionType.value = val.conditionType || ActivityConditionType.gte;
      conditionValue.value = val.conditionValue || null;
    } else {
      actCondition.value = ActivityCondition.all;
      conditionType.value = ActivityConditionType.gte;
      conditionValue.value = null;
    }
  },
  {
    immediate: true,
  }
);

watch([actCondition, conditionType, conditionValue], ([actCondition, conditionType, conditionValue]) => {
  emits("change", {
    activityCondition: actCondition,
    conditionType: conditionType,
    conditionValue: conditionValue,
  });
});
</script>
